<template>
  <el-dialog
    :title="option.title"
    :visible.sync="option.isShow"
    :close-on-click-modal="false"
    width="70%"
    @open="openDialog"
    @close="closeDialog('ruleForm')"
  >
  <el-card>
    <el-row :gutter="10">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="130px"
        class="demo-ruleForm"
      >
        <el-col :span="12">
          <el-form-item label="任务号" prop="TASKID">
            <el-input size="mini" placeholder="请输入任务号" disabled v-model="ruleForm.TASKID"></el-input>
          </el-form-item>
          </el-col>
        <el-col :span="12">
          <el-form-item label="抽样日期" prop="OPERAWORKDATE">
            <el-input size="mini" placeholder="请输入抽样日期" disabled v-model="ruleForm.OPERAWORKDATE"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="抽样方式" prop="SAMPLFLAG">
            <el-select v-model="ruleForm.SAMPLFLAG" filterable disabled placeholder="请选择抽样方式" size="mini">
                    <el-option v-for="item in samplOption" :key="item.code" :label="item.value" :value="item.code">
                    </el-option>
                  </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="抽样人员" prop="SAMPLER">
            <el-input size="mini" placeholder="请输入抽样人员" disabled v-model="ruleForm.SAMPLER"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="采集批次号" prop="BATCHNO">
            <el-input size="mini" placeholder="请输入采集批次号" disabled v-model="ruleForm.BATCHNO"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="采集日期" prop="BATCHDATE">
            <el-input size="mini" placeholder="请输入采集日期" disabled v-model="ruleForm.BATCHDATE"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="采集流水号" prop="COLLECTSERNO">
            <el-input size="mini" placeholder="请输入采集流水号" disabled v-model="ruleForm.COLLECTSERNO"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="渠道类型" prop="CHANNELTYPE">
            <el-select v-model="ruleForm.CHANNELTYPE" filterable disabled placeholder="请选择渠道类型" size="mini">
                    <el-option v-for="item in channelOption" :key="item.code" :label="item.value" :value="item.code">
                    </el-option>
                  </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="任务分配日期" prop="TASKDATE">
            <el-input size="mini" placeholder="请输入任务分配日期" disabled v-model="ruleForm.TASKDATE"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="任务规定开始日期" prop="TASTASKBEGINDATEKID">
            <el-input size="mini" placeholder="请输入任务规定开始日期" disabled v-model="ruleForm.TASKBEGINDATE"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="任务规定结束日期" prop="TASKENDDATE">
            <el-input size="mini" placeholder="请输入任务规定结束日期" disabled v-model="ruleForm.TASKENDDATE"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="任务状态" prop="TASKSTATUS">
            <el-select v-model="ruleForm.TASKSTATUS" filterable disabled placeholder="请选择任务状态" size="mini">
                    <el-option v-for="item in taskStuatsOption" :key="item.code" :label="item.value" :value="item.code">
                    </el-option>
                  </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="任务方式" prop="TASKFLAG">
            <el-select v-model="ruleForm.TASKFLAG" filterable disabled placeholder="请选择任务方式" size="mini">
                    <el-option v-for="item in taskOption" :key="item.code" :label="item.value" :value="item.code">
                    </el-option>
                  </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="质检员" prop="QUALITER">
            <el-input size="mini" placeholder="请输入质检员" disabled v-model="ruleForm.QUALITER"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="质检日期" prop="QUALITDATE">
            <el-input size="mini" placeholder="请输入质检日期" disabled v-model="ruleForm.QUALITDATE"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="得分" prop="SCORE">
            <el-input size="mini" placeholder="请输入得分" disabled v-model="ruleForm.SCORE"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="申诉标识" prop="APPEALFLAG">
            <el-select v-model="ruleForm.APPEALFLAG" filterable disabled placeholder="请选择申诉标识" size="mini">
                    <el-option v-for="item in appealOption" :key="item.code" :label="item.value" :value="item.code">
                    </el-option>
                  </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="会话ID" prop="SESSIONID">
            <el-input size="mini" placeholder="请输入会话ID" disabled v-model="ruleForm.SESSIONID"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="客户姓名" prop="CUSTOMER">
            <el-input size="mini" placeholder="请输入客户姓名" disabled v-model="ruleForm.CUSTOMER"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="客户等级" prop="CUSTOMLEVEL">
            <el-select v-model="ruleForm.CUSTOMLEVEL" filterable disabled placeholder="请选择客户等级" size="mini">
                    <el-option v-for="item in levelOption" :key="item.code" :label="item.value" :value="item.code">
                    </el-option>
                  </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="电话号码" prop="TELNUMBER">
            <el-input size="mini" placeholder="请输入电话号码" disabled v-model="ruleForm.TELNUMBER"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="证件类型" prop="CUSTOMIDTYPE">
            <el-input size="mini" placeholder="请输入证件类型" disabled v-model="ruleForm.CUSTOMIDTYPE"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="客户证件号" prop="CUSTOMIDNO">
            <el-input size="mini" placeholder="请输入客户证件号" disabled v-model="ruleForm.CUSTOMIDNO"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="呼叫类型" prop="CALLTYPE">
            <el-input size="mini" placeholder="请输入呼叫类型" disabled v-model="ruleForm.CALLTYPE"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="运营地区" prop="AREA">
            <el-input size="mini" placeholder="请输入运营地区" disabled v-model="ruleForm.AREA"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="坐席ID" prop="AGENTID">
            <el-input size="mini" placeholder="请输入坐席ID" disabled v-model="ruleForm.AGENTID"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="坐席姓名" prop="AGENTNAME">
            <el-input size="mini" placeholder="请输入坐席姓名" disabled v-model="ruleForm.AGENTNAME"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="坐席级别" prop="AGENTLEVEL">
            <el-select v-model="ruleForm.AGENTLEVEL" filterable disabled placeholder="请选择坐席级别" size="mini">
                    <el-option v-for="item in agentOption" :key="item.code" :label="item.value" :value="item.code">
                    </el-option>
                  </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="分机号" prop="EXTNO">
            <el-input size="mini" placeholder="请输入分机号" disabled v-model="ruleForm.EXTNO"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="班组" prop="TEAM">
            <el-input size="mini" placeholder="请输入班组" disabled v-model="ruleForm.TEAM"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="技能组" prop="SKILL">
            <el-input size="mini" placeholder="请输入技能组" disabled v-model="ruleForm.SKILL"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="多媒体类型" prop="MEDIATYPE">
            <el-select v-model="ruleForm.MEDIATYPE" filterable disabled placeholder="请选择多媒体类型" size="mini">
                    <el-option v-for="item in mediaOption" :key="item.code" :label="item.value" :value="item.code">
                    </el-option>
                  </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="会话开始时间" prop="BEGINTIME">
            <el-input size="mini" placeholder="请输入会话开始时间" disabled v-model="ruleForm.BEGINTIME"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="会话结束时间" prop="ENDTIME">
            <el-input size="mini" placeholder="请输入会话结束时间" disabled v-model="ruleForm.ENDTIME"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="会话持续时长" prop="SESSIONTIME">
            <el-input size="mini" placeholder="请输入会话持续时长" disabled v-model="ruleForm.SESSIONTIME"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="机构号" prop="BRNO">
            <el-input size="mini" placeholder="请输入机构号" disabled v-model="ruleForm.BRNO"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="业务类型" prop="BUSINESSTYPE">
            <el-select v-model="ruleForm.BUSINESSTYPE" filterable disabled placeholder="请选择业务类型" size="mini">
                    <el-option v-for="item in typeOption" :key="item.code" :label="item.value" :value="item.code">
                    </el-option>
                  </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="采集方式" prop="COLLECTFLAG">
            <el-input size="mini" placeholder="请输入采集方式" disabled v-model="ruleForm.COLLECTFLAG"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="音视频文件路径" prop="FILEPATH">
            <el-input size="mini" placeholder="请输入音视频文件路径" disabled v-model="ruleForm.FILEPATH"></el-input>
          </el-form-item>
          </el-col>
        <!-- <el-col :span="24">
          <el-form-item>
            <el-button type="primary" size="mini" @click="submitForm('ruleForm')">保存</el-button>
            <el-button @click="resetForm('ruleForm')" size="mini">重置</el-button>
          </el-form-item>
        </el-col> -->
      </el-form>
    </el-row>
    </el-card>
  </el-dialog>
</template>

<script>
import request from "@/common/utils/requestQC";
import getGlobalParams from "@/common/utils/getGlobalParams";
import toolBox from "@/common/utils/toolBox";

export default {
  props: {
    option: Object
  },
  computed: {
    isShow: {
      get: function() {
        return this.option.isShow;
      },
      set: function(newValue) {
        this.option.isShow = newValue;
      }
    }
  },
  created() {},
  mounted() {
  },
  data() {
    return {
      ruleForm: {
        TASKID: "",
        OPERAWORKDATE: "",
        SAMPLFLAG: "",
        SAMPLER: "",
        BATCHNO: "",
        BATCHDATE: "",
        COLLECTSERNO: "",
        CHANNELTYPE: "",
        TASKDATE: "",
        TASKBEGINDATE: "",
        TASKENDDATE: "",
        TASKSTATUS: "",
        TASKFLAG: "",
        QUALITER: "",
        QUALITDATE: "",
        SCORE: "",
        APPEALFLAG: "",
        SESSIONID:"",
        CUSTOMER:"",
        CUSTOMLEVEL:"",
        TELNUMBER:"",
        CUSTOMIDTYPE:"",
        CUSTOMIDNO:"",
        CALLTYPE:"",
        AREA:"",
        AGENTID:"",
        AGENTNAME:"",
        AGENTLEVEL:"",
        EXTNO:"",
        TEAM:"",
        SKILL:"",
        MEDIATYPE:"",
        BEGINTIME:"",
        ENDTIME:"",
        SESSIONTIME:"",
        BRNO:"",
        BUSINESSTYPE:"",
        COLLECTFLAG:"",
        FILEPATH:"",
        loading: false
      },
      rules: {},
      appealOption:[{'code':'0','value':'否'},{'code':'1','value':'是'}],
      samplOption:[{'code':'0','value':'自动'},{'code':'1','value':'手动'}],
      levelOption: [{
            code: '001',
            value: '非VIP'
          },
          {
            code: '002',
            value: 'VIP黄金级'
          },
          {
            code: '003',
            value: 'VIP铂金级'
          },
          {
            code: '004',
            value: 'VIP钻石级'
          },
        ],
        channelOption: [{
            code: 'C001',
            value: '电话'
          },
          {
            code: 'C002',
            value: '微信'
          },
          {
            code: 'C003',
            value: 'PAD'
          }],
        typeOption: [{
            code: '0',
            value: '账务类'
          },
          {
            code: '1',
            value: '签约类'
          },
          {
            code: '2',
            value: '信息维护类'
          },
          {
            code: '3',
            value: '账户类'
          },
          {
            code: '4',
            value: '理财类'
          },
        ],
        mediaOption: [{
            code: 'voice',
            value: '电话'
          },
          {
            code: 'video',
            value: '视频'
          },
          {
            code: 'chat',
            value: '文字'
          }],
        agentOption: [{
            code: '001',
            value: '一星'
          },
          {
            code: '002',
            value: '二星'
          },
          {
            code: '003',
            value: '三星'
          },
          {
            code: '004',
            value: '四星'
          },
          {
            code: '005',
            value: '五星'
          },
        ],
        taskOption: [{
            code: '0',
            value: '自动'
          },
          {
            code: '1',
            value: '手动'
          }
        ],
        taskStuatsOption: [{
            code: '0',
            value: '未开始'
          },
          {
            code: '1',
            value: '已完成'
          },
          {
            code: '2',
            value: '处理中'
          },
          {
            code: '3',
            value: '废弃'
          },
          {
            code: '4',
            value: '未分配'
          }
        ],
    };
  },
  
  methods: {
    openDialog() {
      if (this.$refs["ruleForm"] != undefined) {
        this.$refs["ruleForm"].clearValidate();
      }
      // console.log('传过来的数据=='+JSON.stringify(this.option.row))
      this.ruleForm.TASKID = this.option.row[0].TASKID;
      this.ruleForm.OPERAWORKDATE = this.option.row[0].OPERAWORKDATE;
      this.ruleForm.SAMPLFLAG = this.option.row[0].SAMPLFLAG;
      this.ruleForm.SAMPLER = this.option.row[0].SAMPLER;
      this.ruleForm.BATCHNO = this.option.row[0].BATCHNO;
      this.ruleForm.BATCHDATE = this.option.row[0].BATCHDATE;
      this.ruleForm.COLLECTSERNO = this.option.row[0].COLLECTSERNO;
      this.ruleForm.CHANNELTYPE = this.option.row[0].CHANNELTYPE;
      this.ruleForm.TASKDATE = this.option.row[0].TASKDATE;
      this.ruleForm.TASKBEGINDATE  = this.option.row[0].TASKBEGINDATE;
      this.ruleForm.TASKENDDATE = this.option.row[0].TASKENDDATE;
      this.ruleForm.TASKSTATUS = this.option.row[0].TASKSTATUS;
      this.ruleForm.TASKFLAG = this.option.row[0].TASKFLAG;
      this.ruleForm.QUALITER = this.option.row[0].QUALITER;
      this.ruleForm.QUALITDATE = this.option.row[0].QUALITDATE;
      this.ruleForm.SCORE = this.option.row[0].SCORE;
      this.ruleForm.APPEALFLAG = this.option.row[0].APPEALFLAG;
      this.ruleForm.SESSIONID = this.option.row[0].SESSIONID;
      this.ruleForm.CUSTOMER = this.option.row[0].CUSTOMER;
      this.ruleForm.CUSTOMLEVEL = this.option.row[0].CUSTOMLEVEL;
      this.ruleForm.TELNUMBER = this.option.row[0].TELNUMBER;
      this.ruleForm.CUSTOMIDTYPE = this.option.row[0].CUSTOMIDTYPE;
      this.ruleForm.CUSTOMIDNO = this.option.row[0].CUSTOMIDNO;
      this.ruleForm.CALLTYPE = this.option.row[0].CALLTYPE;
      this.ruleForm.AREA = this.option.row[0].AREA;
      this.ruleForm.AGENTID = this.option.row[0].AGENTID;
      this.ruleForm.AGENTNAME = this.option.row[0].AGENTNAME;
      this.ruleForm.AGENTLEVEL = this.option.row[0].AGENTLEVEL;
      this.ruleForm.EXTNO = this.option.row[0].EXTNO;
      this.ruleForm.TEAM = this.option.row[0].TEAM;
      this.ruleForm.SKILL = this.option.row[0].SKILL;
      this.ruleForm.MEDIATYPE = this.option.row[0].MEDIATYPE;
      this.ruleForm.BEGINTIME = this.option.row[0].BEGINTIME;
      this.ruleForm.ENDTIME = this.option.row[0].ENDTIME;
      this.ruleForm.SESSIONTIME = this.option.row[0].SESSIONTIME;
      this.ruleForm.BRNO = this.option.row[0].BRNO;
      this.ruleForm.BUSINESSTYPE = this.option.row[0].BUSINESSTYPE;
      this.ruleForm.COLLECTFLAG = this.option.row[0].COLLECTFLAG;
      this.ruleForm.FILEPATH = this.option.row[0].FILEPATH;
    },
    closeDialog(formName) {
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].clearValidate();
      }
      // this.$refs[formName].clearValidate();
      this.$refs[formName].resetFields();
    },
    
    resetForm(formName) {
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].clearValidate();
        this.$refs[formName].resetFields();
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>